<template>
  <div class="seamless-scroll" ref="scrollWrap">
    <div class="scroll-wrap" :style="scrollStyle">
      <slot></slot>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "SeamlessScroll",
  data() {
    return {
      scrollStyle: {
        transform: "translateX(0)",
        transition: "transform 0.5s linear"
      },
      scrollWidth: 0,
      scrollLeft: 0,
      timer: null
    };
  },
  mounted() {
    if(this.$refs.scrollWrap){
      this.scrollWidth = this.$refs.scrollWrap.offsetWidth
      let scrollItem = (this.$refs.scrollWrap.children[0].children[0])
      if (scrollItem.scrollWidth > (this.scrollWidth)) {
        // this.startScroll();
        this.$refs.scrollWrap.children[0].className = 'scroll-execute-wrap'
      } else {
        scrollItem.style.display = 'none';
      }
    }
  },
  methods: {
    startScroll() {
      this.timer = setInterval(() => {
        this.scrollLeft--;
        if (this.scrollLeft <= -this.scrollWidth) {
          this.scrollLeft = 0;
        }
        this.scrollStyle.transform = `translateX(${this.scrollLeft}px)`;
      }, 600);
    }
  }
};
</script>

<style scoped>
.seamless-scroll {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-self: center;
  align-items: center;

  .scroll-wrap {
    width: 100%;
    display: inline-flex;
    white-space: nowrap;
    .scroll-item-inside{
      width: 100%;
      text-align: center;
    }
  }
}

.scroll-execute-wrap {
  display: inline-flex;
  white-space: nowrap;
  animation: 8s seamless-scroll infinite linear;
}

@keyframes seamless-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>